<template>
  <div style="display: flex">
    <div v-for="item in colmuns">
      <div class="select_item" v-if="item.type === 'input'">
        <div class="select_item_top">{{ item.title }}</div>
        <el-input
          :style="{ width: `${item.width ? item.width : '180'}px` }"
          v-model="modelForm[item.value]"
          :placeholder="item?.placeholder"
          :clearable="item?.clearable"
          @change="go"
          @blur="go"
        />
      </div>
      <div class="select_item" v-if="item.type === 'inputNumber'">
        <div class="select_item_top">{{ item.title }}</div>
        <el-input
          :style="{ width: `${item.width ? item.width : '180'}px` }"
          v-model="modelForm[item.value]"
          :placeholder="item?.placeholder"
          :clearable="item?.clearable"
          type="number"
          @change="go"
          @blur="go"
        />
      </div>
      <div class="select_item" v-if="item.type === 'select'">
        <div class="select_item_top">{{ item.title }}</div>
        <el-select
          :style="{ width: `${item.width ? item.width : '180'}px` }"
          v-model="modelForm[item.value]"
          :placeholder="item?.placeholder"
          :clearable="item?.clearable"
          @change="go"
          @blur="go"
        >
          <el-option
            v-for="items in item?.options"
            :key="items.value"
            :label="items.label"
            :value="items.value"
          />
        </el-select>
      </div>
      <div class="select_item" v-if="item.type === 'areaSelect'">
        <div class="select_item_top">{{ item.title }}</div>
        <el-cascader
          :options="pcaTextArr"
          v-model="modelForm[item.value]"
          :placeholder="item?.placeholder"
          :clearable="item?.clearable"
          @change="go"
          @blur="go"
        >
        </el-cascader>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
import { getEmployeeListApi } from "@/api/employeeApi";

export default defineComponent({
  components: {},
  props: {
    // Form列配置项
    colmuns: {
      default: [] as any,
    },
    // Form初始空数据
    modelForm: {
      default: {} as any,
    },
  },
  setup(props, { emit }) {
    const go = () => {
      console.log(props.modelForm);

      emit("onFormChange", props.modelForm);
    };
    return { go, pcaTextArr };
  },
});
</script>
<style scoped>
.select_item {
  display: flex;
  align-items: center;
  margin-left: 15px;
  .select_item_top {
    margin-right: 15px;
  }
}
</style>
